<template>
  <div class="login-view">
    <h1>登录 I 注册</h1>
    <!-- 不同的登录方式 -->
    <div style="height: 40vh; margin-top: 2vh; margin-bottom: 2vh;">
      <router-view></router-view>
    </div>

    <van-divider>
      其他登录方式
    </van-divider>

    <div class="other-login">
      <div
          v-for="item in loginOptions"
          :key="item.name"
          class="login-item"
          :class="{ selected: selectedOption === item.name }"
          @click="selectOption(item.name)"
      >
        <van-icon :name="item.icon" size="2rem" />
      </div>
    </div>

    <div class="agreement-container">
      <label>
        <input type="checkbox" v-model="isAgreed" />
        我已阅读并同意
        <a href="https://example.com/service" target="_blank">用户服务协议</a>
        与
        <a href="https://example.com/privacy" target="_blank">隐私条款</a>
      </label>
      <div class="feedback">
        <a href="javascript:void(0)" @click="handleFeedback">意见反馈</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useRouter} from "vue-router";

// 是否同意协议
const isAgreed = ref(false);
const router = useRouter();

// 登录选项列表
const loginOptions = [
  { name: "account", icon: "setting", label: "账户密码登录" },
  { name: "phone", icon: "phone", label: "手机号登录" },
  { name: "qq", icon: "qq", label: "邮箱登录" },
  { name: "wechat", icon: "wechat", label: "微信登录" },
  { name: "alipay", icon: "alipay", label: "支付宝登录" },
];

// 选中的登录类型
const selectedOption = ref('account');

// 处理选择
function selectOption(option) {
  selectedOption.value = option;
  // 跳转到对应的登录页面
  if (option === "phone") {
    // 跳转到手机号登录页面
    router.push("/login/phone");
  }else if (option === "wechat") {
    // 跳转到微信登录页面
    router.push("/login/wechat");
  }else if (option === "qq") {
    // 跳转到QQ登录页面
    router.push("/login/email");
  }else if (option === "alipay") {
    // 跳转到支付宝登录页面
    router.push("/login/alipay");
  }else if (option === "account") {
    // 跳转到支付宝登录页面
    router.push("/login/account");
  }
}

function handleFeedback() {
  alert("感谢您的反馈！");
}
</script>

<style scoped>
.login-view {
  margin: 8vh 5vw 2vh 5vw;
}

/* 协议相关样式 */
.login-view .agreement-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

.login-view .agreement-container label {
  display: flex;
  align-items: center;
}

.login-view .agreement-container a {
  color: #1e90ff;
  text-decoration: none;
  margin: 0 2px;
}

.login-view .agreement-container a:hover {
  text-decoration: underline;
}

.login-view .feedback {
  margin-top: 10px;
}

.login-view .feedback a {
  color: #1e90ff;
  text-decoration: none;
  cursor: pointer;
}

.login-view .feedback a:hover {
  text-decoration: underline;
}

/* 登录方式样式 */
.other-login {
  display: flex;
  width: 60%;
  margin: 2vh auto;
  justify-content: space-between;
}

.login-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.login-item span {
  margin-top: 0.5rem;
  font-size: 14px;
  color: #666;
}

/* 选中样式 */
.login-item.selected {
  color: #1e90ff;
}

.login-item.selected span {
  font-weight: bold;
  color: #1e90ff;
}
</style>
